Add Left Expand menu of your site !!

In default magento does not provide any left menu for the main page as usual show in normal site.
So we can add a left menu by some ticks:
now Follow these ::
go to app\design\frontend\default\default\template\catalog\navigation\left_expand.phtml

add these code there

<div class="box layered-nav">
  <div class="head">
    <h3><?php echo $this->__('Browse By') ?></h3>
  </div>
  <div id="Main_div"> <span> </span>
    <div>
      <h4 style="padding-left:5px; color:#E38048" id="menu_div">Category Navigation:</h4 >
      <ul id="menu">
        <?php foreach ($this->getStoreCategories() as $_category): ?>
        <?php echo $this->drawItem($_category) ?>
        <?php endforeach ?>
      </ul>
    </div>
    <?php echo $this->getChildHtml('topLeftLinks') ?> </div>
</div>

now add some css in \skin\frontend\default\default\css\left_menu.css

/*Expand Menu of left*/
 
 #Main_div
 {
 	width:97%;
	background:#E3EAEC;
 }

 
#menu {
		width:100%;
		list-style:none;
		padding:2px;
		margin:0;
		top:0;
		position:relative;
		height:100%;
		
}

#menu li {padding:2px 0;text-align:none;display:block;cursor:hand;cursor:pointer;}
#menu li a {color:#1F3447;	font-family:helvetica, arial, verdana;/*font-size:10px;*/font-weight:900;
		display:inline;	padding:5px 8px 5px 0px;text-decoration:none;/*font:normal;*/font-size:13px;}

#menu li a:hover {color:#D96708;font-family:helvetica, arial, verdana;/*font-size:10px;*/font-weight:900;
		display:inline;padding:5px 8px 5px 0px;text-decoration:none;font-size:13px;}

/*2nd ul*/

#menu ul li {padding:2px 5px;text-align:none;display:block;	cursor:hand;cursor:pointer;	}

#menu ul li a{background:url(../images/bg_tierico1.gif) no-repeat;
		padding-left:5px;font-family:georgia, arial;font-size:10px; padding-top:2px;}
		
#menu ul li a:hover{color:#D96708;background:url(../images/bg_tierico1.gif) no-repeat;
		padding-left:5px;font-family:georgia, arial;font-size:10px; padding-top:2px;}
 /*3rd ul*/
#menu ul ul li {padding:2px 10px;text-align:none;display:block;cursor:hand;cursor:pointer;}
#menu ul ul li a{background:url(../images/bg_tierico1.gif) no-repeat;
		padding-left:5px;font-family:georgia, arial;font-size:7px; padding-top:2px;}
		
#menu ul ul li a:hover{color:#D96708;background:url(../images/bg_tierico1.gif) no-repeat;
		padding-left:5px;font-family:georgia, arial;font-size:7px; padding-top:2px;}

 /*End of left*/

then call it to the page.xml file in app\design\frontend\default\default\layout\page.xml

 <block type="page/html_head" name="head" as="head">
                <action method="addJs"><script>prototype/prototype.js</script></action>
                <action method="addJs" ifconfig="dev/js/deprecation"><script>prototype/deprecation.js</script></action>
                <action method="addJs"><script>prototype/validation.js</script></action>
                <action method="addJs"><script>scriptaculous/builder.js</script></action>
                <action method="addJs"><script>scriptaculous/effects.js</script></action>
                <action method="addJs"><script>scriptaculous/dragdrop.js</script></action>
                <action method="addJs"><script>scriptaculous/controls.js</script></action>
                <action method="addJs"><script>scriptaculous/slider.js</script></action>
                <action method="addJs"><script>varien/js.js</script></action>
                <action method="addJs"><script>varien/form.js</script></action>
                <action method="addJs"><script>varien/menu.js</script></action>
                <action method="addJs"><script>mage/translate.js</script></action>
                <action method="addJs"><script>mage/cookies.js</script></action>
                <action method="addCss"><stylesheet>css/reset.css</stylesheet></action>
                <action method="addCss"><stylesheet>css/boxes.css</stylesheet></action>
                <action method="addCss"><stylesheet>css/menu.css</stylesheet></action>
                <action method="addCss"><stylesheet>css/clears.css</stylesheet></action>

                <action method="addItem"><type>skin_css</type><name>css/iestyles.css</name><params/><if>lt IE 8</if></action>
                <action method="addItem"><type>skin_css</type><name>css/ie7minus.css</name><params/><if>lt IE 7</if></action>

                <action method="addItem"><type>js</type><name>lib/ds-sleight.js</name><params/><if>lt IE 7</if></action>
                <action method="addItem"><type>js</type><name>varien/iehover-fix.js</name><params/><if>lt IE 7</if></action>

                <action method="addCss"><stylesheet>css/print.css</stylesheet><params>media="print"</params></action>
            </block>

and then add these lines where you link

/**add this line
*
*/
<action method="addCss"><stylesheet>css/left_menu.css</stylesheet></action>

Then call it were u want

/**block type 
Call
*/
<div>	{{block type="catalog/navigation"  template="catalog/navigation/left_expand.phtml"}}</div>

Tagged: home, left, Magento, menu